<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>捐赠详情</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__common.css" />

    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;

        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        .nav{
            background-color: #fff;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .font{
            height: 2rem;
            flex: 1;
            font-size:0.8rem;
            color:#333333;
            line-height:2rem;
            text-align: center;
        }

        /*tab*/
        .aui-tab-item.aui-active {
            color: #E73C5C;
            font-weight: bold;
            font-size: 0.8rem;
            position: relative;
            border: 0;
        }

        .aui-active:after {
            content: '';
            display: block;
            height: 0px;
            width: 100%;
            border-top: 2px solid #E73C5C;
            bottom: 0px;
            left: 0;
            position: absolute;
        }

        .sss {
            margin: 0px 15px;
            width: 100%;
        }

        .aui-tab-item {
            height: 2.4rem;
            line-height: 2.4rem;
            font-size: 0.8rem;
            color: #333;
        }

        .aui-icon-rightu1 {
            height: 2.4rem;
            width: 41px;
            background: url('__IMG__download.png') no-repeat 0.6rem center;
            background-size: 22px 22px;
        }
        .aui-icon-rightu2 {
            height: 2.4rem;
            width: 45px;
            background: url('__IMG__fenxiang.png') no-repeat 0.6rem center;
            background-size: 22px 22px;
        }
        .hidden{
            visibility:hidden;
        }
        body {
            width: 100%;
            height: 100%;
        }

        .bg {
            width: 100%;
            height: 772px;
            background: url('__IMG__zsbg.png') no-repeat fixed center;
            background-size: 100% 100%;
            display: table;
        }

        .head img {
            width: 5rem;
            height: 5.75rem;
            margin: auto;
            margin-top: 3rem;
            margin-bottom: 2rem;
        }

        .title {
            font-size: 1.15rem;
            color: rgba(145, 0, 13, 1);
            line-height: 1.5rem;
            text-align: center;
        }

        .xin {
            width: 100%;
            height: 7.8rem;
            margin-top: 1rem;
            margin-bottom: 2.55rem;
        }

        .xintu {
            width: 100%;
            height: 100%;
            padding-left: 3.3rem;
            background: url('__IMG__xin.png') no-repeat  center;
            background-size: 9.3rem 7.8rem;
        ;
        }

        .name {
            font-size: 0.8rem;
            color: #333333;
            text-align: left;
            width: 11.3rem;
            margin-bottom: 0.5rem;
        }

        .name span {
            font-size: 0.9rem;
            color: #333333;
            margin-left: 1rem;
        }

        .shici {
            font-size: 0.8rem;
            color: #333333;
            text-align: center;
            font-weight: 600;
        }

        .content {
            width: 100%;
            font-family:STKaiti;
            /*color:rgba(51,51,51,1)*/
            padding: 1.2rem 2.75rem 0 2.75rem;
        }

        .content p {
            font-size: 0.7rem;
            color: rgba(51, 51, 51, 1);
            text-align: justify;
        }

        .gongzhang {
            width: 4rem;
            height: 4rem;
            position: relative;
            top: -70px;
            left: 186px;
        }

        .gongzhang img {
            width: 100%;
            height: 100%;
        }

        .right {
            margin-left: 0.9rem;
            font-weight: 600;
        }

        .left {
            width: 3.5rem;
            font-size: 0.8rem;
        }
        .zhanwie{
            width: 1.6rem;
        }
    </style>
</head>

<body>
<div class="l_box"  id="loading2"><img src="__IMG__loading.gif" alt="" id="loading"></div>
<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;background-color:#FFFFFF;z-index:10000;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title" style="font-size0.8rem;font-weight:bold">公益历程</div>
    <a class="aui-pull-right " id="right" >
        <!--<span class="aui-iconfont aui-icon-rightu1" tapmode="active" id="saveImg"  onclick="sss()"></span>-->
        <span class="aui-iconfont aui-icon-rightu2" tapmode="active" onclick="right()"></span>
    </a>
</header>
<div class="aui-tab bar underLine" id="tab1">
    <div class="underLine sss aui-tab" id="tab">
        <div class="aui-tab-item aui-active">我的证书</div>
        <div class="aui-tab-item" onclick="openmybooklist();">荣誉证书</div>
    </div>
</div>
<div class="bg" style="margin-top:0.25rem;" id="bg">
    <div class="head">
        <img src="__IMG__head.png" alt="">
    </div>
    <div class="title">
        志愿者证书
    </div>

    <div class="xin">
        <div class="xintu">
            <div class="name flex-wrap" style="">
                <div class='left flex-wrap'>姓<div class="zhanwie"></div>名</div>
                <div class="right" id="user_username"></div>
            </div>
            <div class="name flex-wrap" style="">
                <div class='left flex-wrap'>性<div class="zhanwie"></div>别</div>
                <div class="right" id="user_gender">女</div>
            </div>
            <div class="name flex-wrap" style="">
                <div class='left'>加入时间</div>
                <div class="right" id="user_join_time"></div>
            </div>
            <div class="name flex-wrap" style="">
                <div class='left'> 注册编号</div>
                <div class="right" id="user_number"></div>
            </div>
            <div class="name flex-wrap" style="">
                <div class='left'>所属机构</div>
                <div class="right" id="mechanism_name"></div>
            </div>
        </div>
    </div>
    <div class="shici">
        志愿者誓词
    </div>
    <div class="content">
        <p>我愿意成为一名光荣的护理志愿者。</p>
        <p>我承诺：</p>
        <p>要以南丁格尔为榜样，尽己所能，帮助他人，服务社会。践行红十字人道、博爱、奉献精神， 开展护理志愿服务。保护生命，维护健康，传播健康理念，促进社会和谐进步。
        </p>
        <p class="" style="margin-top:2.1rem;text-align:right;">
            中国南丁格尔志愿护理服务总队
        </p>
        <p style="margin-top:0.4rem;text-align:right;margin-right:2.5rem;font-size:0.6rem;" id="user_sh_time">2018年08月01日</p>
    </div>


    <div class="gongzhang">
        <img src="__IMG__gongzhang.png" alt="">
    </div>

</div>
<img id="test1" src="" style="display: block;">


<div class="toast-wrap">
    <span class="toast-msg"></span>
</div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__html2canvas.min.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>
<script type="text/javascript">
    function openmybooklist(){
        window.location.href='{:url("my/gongyilicheng2")}';
    }
    getdata();

    function getdata() {
        loaddingOpen();
        $.ajax({
            url:'{:url("my/certificate")}',
            data:'id='+55,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();
                if (data.status=='200') {

                    $('#mechanism_name').html(data.data.mechanism_name);
                    $('#user_join_time').html(data.data.user_join_time);
                    $('#user_number').html(data.data.user_number);
                    $('#user_sh_time').html(data.data.user_sh_time);
                    $('#user_username').html(data.data.user_username);
                    if (data.data.user_gender==1) {
                        $('#user_gender').html('男');
                    }else if(data.data.user_gender==2){
                        $('#user_gender').html('女');

                    }else{
                        $('#user_gender').html('未知');

                    }
                    sss();

                }else {
                    toast(data.msg);
                }



            },
            error: function(xhr, type){
                loaddingClose();
                toast('无网络或连接超时，请重试');

            }
        });

    }
    // // html转图片
    // function takeScreenshot() {
    //     console.log('test');
    //     html2canvas(document.getElementById('view'), {
    //         onrendered: function(canvas) {
    //             document.body.appendChild(canvas);
    //         },
    //         // width: 300,
    //         // height: 300
    //     });
    // }
    function sss(){
        html2canvas($(".bg")).then(function(canvas) {
            var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
           // $('#test1').src= imgUri;
           //  document.getElementById('test1').src = imgUri;
            var img = new Image();
            img.src = imgUri;
            img.onload = function() {
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = w;
                h = w / scale;
                var quality = 0.6;  // 默认图片质量为0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                // if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                //     quality = obj.quality;
                // }
                // quality值越小，所绘制出的图像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality);
                document.getElementById('test1').src = base64;
                $('#bg').hide();
                // ajaxImg(base64);
                // window.location.href= imgUri; // 下载图片
            }
        });
    };


</script>

</html>
